<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <article-item
          v-for="item in list"
          :key="item.art_id"
          :articleItem="item"
          @diseLikeArticle="dislikeart"
          @reportArticle="reportart"
          @click.native="itemClick(item.art_id)"
        ></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import articleItem from "@/components/articleItem.vue";
import { getArticleList, disLikeArticle,reportArticle } from "@/api/index";
import { Toast } from "vant";

export default {
  props: {
    // articleList:Array
    channelId: Number,
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      theTime: +new Date(),
      isLoading: false,
    };
  },
  name: "articleList",
  components: { articleItem },
  //   网页刚打开created和methods里的数据都发送了请求，会导致密钥混乱
  created() {
    this.getArticleListFn();
  },
  methods: {
    // 请求文章数据函数封装
    async getArticleListFn() {
      let res2 = await getArticleList({
        channel_id: this.channelId,
        timestamp: this.theTime,
      });
      // 无论是ceated第一次是空数组没问题，接着下页数据请求回来再合并
      this.list = [...this.list, ...res2.data.data.results];
      this.theTime = res2.data.data.pre_timestamp;
      this.loading = false;
      if (res2.data.data.pre_timestamp === null) {
        this.finished = true;
      }
      this.isLoading = false;
    },
    async onLoad() {
      if (this.list.length === 0) {
        this.loading = false;
        return;
      }
      this.getArticleListFn();
    },
    async onRefresh() {
      this.list = [];
      this.theTime = +new Date();
      this.getArticleListFn();
    },
    async dislikeart(art_id) {
      await disLikeArticle(art_id);
      Toast({
        type: "success",
        message: "尽量减少提供相关内容",
        position: "top",
      });
    },
    async reportart(artid,type){
      await reportArticle(artid,type)
      Toast({
        type: "success",
        message: "反馈成功",
        position: "top",
      });
    },
    itemClick(e){
      this.$router.push({
        path:`/detail?art_id=${e}`
      })
    }
  },
};
</script>

<style>
</style>